<template>
  <div class="main">
    <el-card>
      <div type="flex">
          <el-input style="width:200px;margin-right:10px" size="small" v-model="page.username" placeholder="根据用户名搜索"></el-input>
        <el-button size="small" @click="clearBtn">清空</el-button>
        <el-button size="small" type="primary" @click="search(page.username)">搜索</el-button>
           <el-button  icon="el-icon-edit" type="success" size="small" justify="end" @click="showDialog = true">新增用户</el-button>
      </div>
      <div style="margin-top:20px;margin-bottom=20px">
        <el-alert
    :title="`共${listData.length}条记录`"
    type="info"
    show-icon>
  </el-alert>
      </div>

      <!-- 表格 -->
      <div style="margin-top:20px">
         <el-table
    :data="listData"
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="序号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="120">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话"
      width="120">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="permission_group_title"
      label="权限组名称"
      width="300">
    </el-table-column>
    <el-table-column
      prop="role"
      label="角色"
      width="120">
    </el-table-column>
    <el-table-column label="操作" >
      <template slot-scope="{ row }">
          <el-button type="primary" icon="el-icon-edit" circle @click.native="editUser(row)" ></el-button>
           <el-button type="danger" icon="el-icon-delete" circle @click.native="delUser(row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
      </div>
      <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            layout="prev, pager, next,total"
            :page-size.sync="page.size"
            :current-page.sync="page.page"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
    </el-card>
<usersAdd :show-dialog.sync="showDialog" ref="edit"></usersAdd>
<!-- <usersEdit :is-show-edit.sync = 'isShowEdit' ref="edit"></usersEdit> -->
  </div>

</template>

<script>
import { list, remove } from '@/api/base/users.js'
import usersAdd from '@/module-manage/components/users-add'
// import usersEdit from '@/module-manage/components/users-edit'
export default {
  data () {
    return {
      showDialog: false,
      // isShowEdit: false,
      listData: [],
      loading: false,
      input: '',
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0, // 总数
        username: ''
      }
    }
  },
  components: {
    usersAdd
    // usersEdit
  },

  created () {
    // this.getUserList()
    this.getUserPage()
  },

  methods: {
    search () {
      this.getUserPage()
    },
    clearBtn () {
      this.page.username = ''
      this.getUserPage()
    },
    editUser (data) {
      this.$refs.edit.editUserInfo(data)
    },
    changePage (newPage) {
      this.page.page = newPage
      this.getUserPage()
    },
    async getUserPage () {
      const { data } = await list(this.page)
      console.log(data.pagesize)
      console.log(data.list)
      this.listData = data.list
      this.page.total = data.counts
      console.log(34567)
    },
    // 删除用户
    async delUser (data) {
      try {
        console.log(data)
        await this.$confirm('您确定删除该用户吗')
        await remove(data)
        this.$message.success('删除员工成功')
        this.getUserPage()
      } catch (e) {
        console.log(e)
      }
    }
  }
}

</script>

<style scoped lang='less'>
.main{
  margin: 20px 15px 0;
}
.el-button--danger{
      color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
}
.el-button--primary{
      color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
}
</style>
